<template>
  <div class="heads">
      <flex-box>
        <flex-box-item v-for="(item,index) in item" :key="index">
          <span  @touchend="jump(index)">{{item.name}}</span>
        </flex-box-item>
      </flex-box>
      <flex-box>
        <div v-for="(item,index) in item" :key="index">
          <flex-box-item  v-if="index == ind">
            <div></div>
          </flex-box-item>
        </div>
      </flex-box>
  </div>
</template>
<script>
  import {FlexBox,FlexBoxItem} from 'vue-ydui/dist/lib.rem/flexbox'
  import {Layout} from 'vue-ydui/dist/lib.rem/layout'
  import bus from '@/common/js/base/eventBus.js'
  export default {
    components:{
      FlexBox,
      FlexBoxItem
    },
    data(){
      return {
        item:[
          {'name':'周边','go':'/greet'},
          {'name':'家人','go':'/greet/family'},
          {'name':'关注','go':'/chat'},
          {'name':'有约','go':'/chat'}
          ],
        ind:0,
        headIndex:null
      }
    },
    methods:{
      jump(n){
        this.ind = n;
        this.$router.push({path:this.item[n].go})
      },
    },
  }


</script>
<style lang="less" scoped>
  @import '~less/base';
.heads{
  background: @head-bg;
    >div:nth-child(1){
      padding-top: 0.22rem;
      padding-bottom: 0.15rem;
      >div{
        text-align: center;
        font-size: 14px;
        line-height: 0.6rem;
      }
    }
    >div:nth-child(2){
      height: 0.04rem;
      background: #ffb36e;
      >div{
        width: 100% ;
        >div{
          height: 0.06rem;
          width: 50%;
          background: #ff4081;
          margin-top: -0.1rem;
          margin-left: 50%;
          transform: translateX(-50%);
          position: relative;
          >div{
            width: 0;
            height: 0;
            border-width: 0rem 0.15rem 0.15rem 0.15rem;
            border-color: #ff4081 transparent;
            border-style: solid;
            margin-left: 50%;
            transform: translateX(-50%);
            position: absolute;
            top:-0.1rem;
          }
        }
      }


    }
}
</style>
